<template>
  <div id="app">
    <div class="container_left"> 
      <div class="container-box" v-for="(item, index) in list" :key="index">
        <p :text="item.content"  @click="jump(item)"> {{ item.title }}</p>
           <span :class="[item.children&&item.children.length ? 'p':'',]" :style="{transform: item.isShow == true? 'rotate(90deg)':'rotate(270deg)'   }" @click="showSta(item)"></span>
         <ul v-if="item.isShow">
          <li @click="jumpChild(itemChild)" v-for="(itemChild,index) in item.children" :key="index">{{ itemChild.title}} </li>
        </ul>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      list:[
        {title:'控制面板',name:'/work/home',content:'11'},
        {title:'自主学习',name:'/work/study',isShow:false,content:'自主学习',children:[
          {title:'分类管理',name:'/work/class',content:'分类管理',},
          {title:'课程管理',name:'/work/curriculum',content:'课程管理',},
        ]},
        {title:'学习面板',name:'/work/core',isShow:false,content:'学习面板',children:[
          {title:'作业批改',name:'/work/task',content:'作业批改'}
        ]}
      ],
    }
  },
  methods:{
    jump(item){
      if(item.children&&item.children.length){
        item.isShow = !item.isShow;
      }else{
        this.$router.push({
        name:item.name
      })
      }
    },
    jumpChild(itemChild){
      this.$router.push({
        name:itemChild.name
      })
    },
    fun(item){
        console.log(item.children)
      },
      showSta(item){
        console.log(item);
      }
  }
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  text-align: center;
}
.container_left{
  width: 300px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  background: #4a608f;
  font-size: 22px;
  text-align: center;
  color: #fff;
  .container-box{
    position: relative;
  }
  p{
    position: relative;
  }
  .p{
    cursor: pointer;
    display: block;
    width: 0;
    height: 0;
    border-top: 9px transparent solid;
    border-bottom: 9px transparent solid;
    border-right: 11px solid #fff;
    transform: rotate(270deg);
    position: absolute;
    right: 40px;
    top: 2px;
  }
  ul{
    margin-top: 10px;
    list-style: none;
    text-align: center;
    background: #2f2f45;
    li{
    font-size: 16px;
    height: 50px;
    line-height: 40px;
    color: #c5c1c1;
    }
  }
}
</style>
